<template>
  <view class="working-hours-container">
    <!-- 标题 -->
    <view class="header line">
      <text class="title">公司标准工作时间</text>
      <text class="description">添加工作时间，标准时间仅为求职者提供参考，不代表公司下所有职位工作时间。</text>
    </view>

     <!-- 工作时间 -->
        <view class="section line">
          <text class="section-title">公司福利待遇 2/2</text>
		</view>
			<!-- 时间选择弹框 -->
			<uni-popup ref="timePickerPopup" type="bottom">
			  <view class="time-picker-popup">
			    <!-- 时间选择器 -->
			    <picker mode="time" range @change="onTimeRangeChange">
			      <view class="time-picker-item">
			        {{ timeRange[0] || '开始时间' }} - {{ timeRange[1] || '结束时间' }}
			      </view>
			    </picker>
			  </view>
			</uni-popup>
          

    <!-- 休息时间 -->
    <view class="section">
      <text class="section-title">休息时间（可选）</text>
      <view class="checkbox-group">
        <view
          class="checkbox-item"
          :class="{ selected: selectedRestOptions === item }"
          v-for="(item, index) in restOptions"
          :key="index"
          @click="selectRestOption(item)"
        >
          <text class="checkbox-label">{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 加班情况 -->
    <view class="section">
      <text class="section-title">加班情况（可选）</text>
      <view class="checkbox-group">
        <view
          class="checkbox-item"
          :class="{ selected: selectedOvertimeOptions === item }"
          v-for="(item, index) in overtimeOptions"
          :key="index"
          @click="selectOvertimeOption(item)"
        >
          <text class="checkbox-label">{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-button-container">
      <button class="save-button" @click="saveWorkingHours">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      workingHours: "", // 工作时间
      timeRange: ["", ""], // 时间段（开始时间和结束时间）
      restOptions: ["双休", "排班轮休"], // 休息时间选项
      selectedRestOptions: null, // 选中的休息时间（单选）
      overtimeOptions: ["不加班", "偶尔加班", "弹性加班"], // 加班情况选项
      selectedOvertimeOptions: null, // 选中的加班情况（单选）
    };
  },
  methods: {
    // 显示时间选择弹框
    showTimePickerPopup() {
      this.$refs.timePickerPopup.open();
    },
    // 关闭时间选择弹框
    closeTimePickerPopup() {
      this.$refs.timePickerPopup.close();
    },
    // 时间范围选择事件
    onTimeRangeChange(e) {
      this.timeRange = e.detail.value; // 更新时间段
    },
    // 确认工作时间
    confirmWorkingHours() {
      if (!this.timeRange[0] || !this.timeRange[1]) {
        uni.showToast({
          title: "请选择完整的时间段",
          icon: "none",
        });
        return;
      }
      this.workingHours = `${this.timeRange[0]} - ${this.timeRange[1]}`;
      this.closeTimePickerPopup(); // 关闭弹框
    },
    // 选择休息时间（单选）
    selectRestOption(option) {
      if (this.selectedRestOptions === option) {
        this.selectedRestOptions = null; // 取消选中
      } else {
        this.selectedRestOptions = option; // 选中
      }
    },
    // 选择加班情况（单选）
    selectOvertimeOption(option) {
      if (this.selectedOvertimeOptions === option) {
        this.selectedOvertimeOptions = null; // 取消选中
      } else {
        this.selectedOvertimeOptions = option; // 选中
      }
    },
    // 保存工作时间
    saveWorkingHours() {
      if (!this.workingHours) {
        uni.showToast({
          title: "请输入工作时间",
          icon: "none",
        });
        return;
      }

      const data = {
        workingHours: this.workingHours,
        restOptions: this.selectedRestOptions, // 直接传递单个值
        overtimeOptions: this.selectedOvertimeOptions, // 直接传递单个值
      };

      // 返回上一页并传递数据
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit("updateWorkingHours", data);

      uni.navigateBack();
    },
  },
};
</script>

<style scoped>
.working-hours-container {
  padding: 20px;
  background-color: #fff;
}

.header {
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.line {
  border-bottom: 1px solid #ebebeb;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #151515;
  display: block;
  margin-bottom: 10px;
}

.description {
  font-size: 14px;
  color: #666;
}

.section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  color: #151515;
  display: block;
  margin-bottom: 10px;
}

.input-group {
  margin-bottom: 20px;
}

.input {
  width: 100%;
  border-radius: 8px;
  font-size: 14px;
}

.time-picker-popup {
  background-color: #fff;
  padding: 20px;
  border-radius: 16px 16px 0 0;
}

.time-picker-item {
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-item {
  width: 80px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #fff;
  border-radius: 4px;
  background: #ECECEC;
  margin-bottom: 10px;
  margin-right: 15px;
  cursor: pointer;
}

.checkbox-item.selected {
  background-color: #CACCFF; /* 紫色背景 */
  color: #333; /* 文字颜色变为白色 */
}

.checkbox-label {
  font-size: 14px;
  color: inherit; /* 继承父元素的颜色 */
}

.save-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px 20px;
}

.save-button {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
  border-radius: 32px;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
}
</style>